<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26-jQuery事件冒泡和默行为</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {

            /*
            事件命名空间，就是事件类型后面以点语法附加一个别名，以便引用事件，
            如”click.a”，其中”a”就是click当前事件类型的别名，即事件命名空间

            想要事件的命名空间有效,必须满足两个条件
            1.事件是通过on来绑定的
            2.通过trigger或者triggerHandler触发事件
            */
            $(".son").on("click", function () {
                alert("click1");
            });
            $(".son").on("click.zs", function () {
                alert("click2");
            });
            $(".son").on("click.ls", function () {
                alert("click3");
            });
            // $(".son").trigger("click.zs");
            $(".son").trigger("click.ls");

            // 删除事件命名空间，较为推荐的两种方式
            // $(".son").off("click.ls")
            // $(".son").off(".ls")

            // 如果事件类型后面附加感叹号，则表示触发不包含命名空间的特定事件类型
            // $(".son").trigger("click!") 
        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>